<template>
  <view class="delivery-order" @click="onlyRead ? () => {} : toDeliverOrderDetailsPage(deliveryOrder.id)">
    <view class="row1">
      <view class="left">
        <span class="time-desc">
          <uni-icons
            custom-prefix="iconfont"
            type="icon-dingshi"
            size="23"
            v-if="deliveryOrder.designatedDeliveryTime != null"
          ></uni-icons>

          <span class="time"> {{ formatDeliveryTimeDurationDesc(deliveryOrder) }}</span
          >{{
            deliveryOrder.designatedDeliveryTime == null
              ? `(${currentDateAppendMinutesAndFormat(
                  isGrabbingOrder ? deliveryOrder.deliveryDuration! : remainingDuration(deliveryOrder.deliveryTime!)
                )}前送达)`
              : '(定时配送)'
          }}

          #{{ deliveryOrder.code }}</span
        >
      </view>
      <view class="right">
        <span class="amount"><span class="amount-char">￥</span>{{ deliveryOrder.income }}</span>
      </view>
    </view>
    <view class="row2">
      <view class="left">
        <view class="distance" v-if="isGrabbingOrder">
          <span class="value">{{ (deliveryOrder as NearbyDeliveryOrder).shopDistance.toFixed(1) }}</span>
          <span class="unit">km</span>
        </view>
        <view class="extreme-point" :style="{ background: '#ff644d' }" v-else></view>
        <image src="@/static/image/index/line.svg" class="line"></image>
        <view class="distance" v-if="isGrabbingOrder">
          <span class="value">{{ (deliveryOrder as NearbyDeliveryOrder).shopToUserDistance.toFixed(1) }}</span>
          <span class="unit">km</span>
        </view>
        <view class="extreme-point" :style="{ background: '#24c874' }" v-else></view>
      </view>
      <view class="right">
        <view class="shop-position-info">
          <span class="shop-name">
            <span>{{ deliveryOrder.shopName }} </span>
            <image
              class="icon"
              src="@/static/image/delivery-order/strike.svg"
              v-if="!isGrabbingOrder"
              @click.stop="strike(deliveryOrder.consigneePhone)"
            />
            <image class="icon" src="@/static/image/delivery-order/map.svg" v-if="!onlyRead" />
          </span>
          <span class="address-detail-desc">{{ deliveryOrder.shopAddressDescribe }}</span>
        </view>
        <view class="user-position-info">
          <span class="address">
            <span>{{ deliveryOrder.consigneeAddressName }} ({{ deliveryOrder.consigneeAddressDescribe }})</span>
            <image
              class="icon"
              src="@/static/image/delivery-order/strike.svg"
              v-if="!isGrabbingOrder"
              @click.stop="strike(deliveryOrder.shopPhone)"
            />
            <image class="icon" src="@/static/image/delivery-order/map.svg" v-if="!onlyRead" />
          </span>
        </view>
      </view>
    </view>
    <view class="row3" @click.stop>
      <slot name="control"></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import { DeliveryOrderState } from '@/enum'
import type DeliveryOrder from '@/types/entity/DeliveryOrder'
import type { NearbyDeliveryOrder } from '@/types/response/delivery-order'
import { convertMinutesOrHoursTimeDesc, TimeOperations } from '@/utils/TimeUtils'
import { computed } from 'vue'

const props = defineProps({
  deliveryOrder: {
    type: Object as () => DeliveryOrder | NearbyDeliveryOrder,
    required: true
  },
  onlyRead: {
    type: Boolean,
    default: false
  }
})
const isGrabbingOrder = computed(() => props.deliveryOrder.deliveryState < DeliveryOrderState.RIDER_RECEIVED_ORDER)
// 在当前时间内加指定分钟，并返回HH:mm形式
function currentDateAppendMinutesAndFormat(minutes: number) {
  return new TimeOperations().addMinutes(minutes).formatDate('HH:mm')
}
// 计算剩余时长
function remainingDuration(deliveryTime: string) {
  // 将deliveryTime转为时间戳
  const deliveryTimestamp = new TimeOperations().init(deliveryTime).getTimestamp()
  // 返回剩余分钟
  return (deliveryTimestamp - Date.now()) / 1000 / 60
}
// 获取格式化后的定时时间
function getFormatDesignatedDeliveryTime(designatedDeliveryTime: string) {
  const designatedDeliveryTimeOperation = new TimeOperations().init(designatedDeliveryTime)
  const isToday = designatedDeliveryTimeOperation.isToday()
  return new TimeOperations().init(designatedDeliveryTime).formatDate(isToday ? 'HH:mm' : 'MM-dd HH:mm')
}
// 获取配送订单配送剩余时长描述
function formatDeliveryTimeDurationDesc(deliveryOrder: DeliveryOrder) {
  if (deliveryOrder.designatedDeliveryTime != null) {
    return getFormatDesignatedDeliveryTime(deliveryOrder.designatedDeliveryTime)
  } else {
    const timeDuration = isGrabbingOrder.value
      ? deliveryOrder.deliveryDuration!
      : remainingDuration(deliveryOrder.deliveryTime!)
    return timeDuration > 0
      ? `${convertMinutesOrHoursTimeDesc(timeDuration)}内`
      : convertMinutesOrHoursTimeDesc(timeDuration)
  }
}
// 看订单详情
function toDeliverOrderDetailsPage(deliveryOrderId: number) {
  uni.navigateTo({ url: `/pages/delivery-order-details/index?deliveryOrderId=${deliveryOrderId}` })
}
// 打电话
function strike(phone: string | number) {
  uni.makePhoneCall({
    phoneNumber: phone + ''
  })
}
</script>

<style scoped lang="scss">
.delivery-order {
  margin-top: 15px;
  padding: 2px 20rpx 20rpx;
  width: 100%;
  border-radius: 15rpx;
  background-color: #fff;
  box-sizing: border-box;

  .row1 {
    display: flex;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;

    .left {
      .time-desc {
        display: flex;
        align-items: center;

        .time {
          font-size: 32rpx;
          font-weight: 700;
          color: #f66415;
        }
      }
    }

    .right {
      .amount {
        font-size: 40rpx;
        font-weight: 700;
        color: #f93733;

        .amount-char {
          font-size: 30rpx;
        }
      }
    }
  }

  .row2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 15px;

    .left {
      display: flex;
      align-items: center;
      padding: 25rpx;
      height: 85px;
      border-radius: 60rpx;
      background-color: #f7f7f7;
      flex-direction: column;

      .distance {
        display: flex;
        align-items: center;
        font-size: 25rpx;
        flex-direction: column;

        .value {
          font-weight: 700;
          color: #333;
        }

        .unit {
          font-size: 22rpx;
          color: #7f7f7f;
        }
      }

      .extreme-point {
        min-width: 20rpx;
        min-height: 20rpx;
        border-radius: 50%;
      }

      .line {
        width: 1.5px;
        flex-grow: 1;
      }
    }

    .right {
      display: flex;
      padding: 0 20rpx;
      flex-direction: column;
      flex-grow: 1;

      .shop-position-info {
        margin-bottom: 20px;
      }

      .shop-position-info,
      .user-position-info {
        display: flex;
        font-size: 30rpx;
        line-height: 50rpx;
        flex-direction: column;

        .shop-name,
        .address {
          display: flex;
          align-items: center;
          font-size: 32rpx;
          font-weight: 700;
          line-height: 50rpx;

          .icon {
            margin-left: 20rpx;
            width: 36rpx;
            height: 36rpx;
          }
        }

        .address-detail-desc {
          font-size: 27rpx;
          color: #646464;
          line-height: 40rpx;
        }
      }
    }
  }
}
</style>
